<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      maxCoValue:3,
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
       
        for(const cov of val.CO){
        if(cov>this.maxCoValue){
          this.maxCoValue = cov;
        }
      }
      this.maxCoValue = Math.ceil(this.maxCoValue)
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      for(const cov of this.chartData.CO){
        if(cov>this.maxCoValue){
          this.maxCoValue = cov;
        }
      }
      this.maxCoValue = Math.ceil(this.maxCoValue)
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {

    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
   
      this.setOptions(this.chartData)

    },
    setOptions({time,PM25,CO,PM10,SO2,NO2,O3} = {}) {
      this.chart.setOption({
       
        xAxis: {
          data:time,
          type: 'category',
   
          splitLine:{
            show:true,
            lineStyle:{
              width: 1,
              opacity: 0.3,
              type:'dashed',
              color:'black'
            }
          },
          splitArea: {
          show: false
          },
          axisLine: {
          show: false,//不显示坐标轴线
    },
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel:{
             //x轴文字的配置
            // show: true,
            // rotate:15,
            interval: 2,//使x轴文字显示全
            showMaxLabel: true,
            textStyle:{
              fontSize:'12',
                color:"black"
              }
          },


        },
        grid: {
              left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
          // left: 10,
          // right: 10,
          // bottom: 20,
          // top: 30,
          // containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          formatter:function (params) {
            var res='<div>'+params[0].name+'</p></div>' 
            for(var i=0;i<params.length;i++){

              if(params[i].seriesName == 'AQI'){
                res+='<div>'+params[i].marker+params[i].seriesName+': '+params[i].data+'</div>';
              }else if(params[i].seriesName == "CO")   {
                res+='<div>'+params[i].marker+params[i].seriesName+': '+params[i].data+' mg/m³ </div>';
              }else {
                res+='<div>'+params[i].marker+params[i].seriesName+': '+params[i].data+' μg/m³</div>'
              }
            }
            return res;
            // return params[0].marker+params[0].seriesName;

          },
          padding: [5, 10]
        },
        yAxis: [{
          max:this.chartData.max,
          type: 'value',
          splitLine:{
            show:true,
            lineStyle:{
              width: 1,
              opacity: 0.2,
              type:'dashed',
              color:'black'
            }
          },
          boundaryGap: [0, '100%'],
          splitArea: {
          // show: false
          },
          axisLabel:{//修改坐标系字体颜色
              show:true,
              textStyle:{
                fontSize:'15',
                color:"black"
              }
	        },

        },
        {
          type: 'value',
          name:"一\n氧\n化\n碳\n浓\n度\n︵\nmg\n︶",
           splitLine:false,
           splitArea: {
          show: false
          },
          axisLabel:{//修改坐标系字体颜色
              show:true,
              textStyle:{
                fontSize:15,
                color:"black"
              }
	        },
          nameLocation:"center",
          nameGap:35,
          nameRotate:0,
          min:0,
          max:this.maxCoValue,
          nameTextStyle:{
                            fontSize: 15,
                            color: 'black'
                        },
        }
      ],
        legend: {
          data: ['PM2.5','CO','PM10','SO2','NO2','O3'],
          textStyle:{
			    color:'black',
		},
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [

        {
          showSymbol: false,
          name: 'PM2.5',
          smooth: true,
          type: 'line',
          itemStyle: {
                normal: {
                    lineStyle: {
                      width:3// 0.1的线条是非常细的了
                    }
                }
            },
            symbol: 'none',
            sampling: 'lttb',
          data: PM25,
          animationDuration: 2000,
          animationEasing: 'quadraticOut',
              
        },
      {
        name: 'CO',
        yAxisIndex:1,
        showSymbol: false,
          smooth: true,
          type: 'line',
          itemStyle: {
                normal: {
                    lineStyle: {
                      width:3// 0.1的线条是非常细的了
                    }
                }
            },
            symbol: 'none',
            sampling: 'lttb',
          data: CO,
          animationDuration: 2000,
          animationEasing: 'quadraticOut'
      },
      {
        name: 'PM10',
        showSymbol: false,
          smooth: true,
          type: 'line',
          itemStyle: {
                normal: {
                    lineStyle: {
                      width:3// 0.1的线条是非常细的了
                    }
                }
            },
            symbol: 'none',
            sampling: 'lttb',
          data: PM10,
          animationDuration: 2000,
          animationEasing: 'quadraticOut'
      },
      {
        name: 'NO2',
        showSymbol: false,
          smooth: true,
          type: 'line',
          itemStyle: {
                normal: {
                    lineStyle: {
                      width:3// 0.1的线条是非常细的了
                    }
                }
            },
            symbol: 'none',
            sampling: 'lttb',
          data: NO2,
          animationDuration: 2000,
          animationEasing: 'quadraticOut'
          
      },
      {
        name: 'SO2',
        showSymbol: false,
          smooth: true,
          type: 'line',
          itemStyle: {
                normal: {
                    lineStyle: {
                      width:3// 0.1的线条是非常细的了
                    }
                }
            },
            symbol: 'none',
            sampling: 'lttb',
          data: SO2,
          animationDuration: 2000,
          animationEasing: 'quadraticOut'
          
      },
      {
        name: 'O3',
          smooth: true,
          showSymbol: false,
          type: 'line',
          itemStyle: {
                normal: {
                    lineStyle: {
                      width:3// 0.1的线条是非常细的了
                    }
                }
            },
            symbol: 'none',
            sampling: 'lttb',
          data: O3,
          
          animationDuration: 2000,
          animationEasing: 'quadraticOut'
      }
    ]
      })
    }
  }
}
</script>
